// 安全监控系统  预览模式下 断电区域相关功能的组件开发
import component from "../../Component.js"
import Type from "../../../experience/db/Type.js";

export default class LayerViewer extends component {
    constructor() { super() }

    control() {
        this.$$("#layerselect-popup").on("click", async () => {
            // 这里 每次好需要保存一下 原始的图层列表
            const originalCheckBox = [];
            document.getElementsByName('layer-select-checkbox')
                .forEach(el => originalCheckBox.push(el));

            this.originalSelectedLayers = originalCheckBox.filter(el => el.checked).map(i => i.value);
            if(originalCheckBox.length !== 0) {
                // 表示 已经创建过了，不要再重复创建图层选择的dialog了
                this.popup.open();
            } else {
                this.popup = this.app.popup.create({ el: '.sm-layerselect-pop' });
                const checkBox = this.$$('.sm-layerselect-pop article');
                const layerTemplate = await this.LayerCheckBoxTemplateCreate()
                const innerCheckBox = `
                    <div class="list list-strong-ios list-outline-ios list-dividers-ios">
                        <ul>${layerTemplate}</ul>
                    </div>
                `;
                checkBox.append(innerCheckBox);
                this.popup.open();
            }

        });

        this.$$('#layerselect').on('click',() => {
            const checkboxList = document.getElementsByName('layer-select-checkbox');
            const ExtractLayers = [];
            checkboxList.forEach((checkboxitem) => {
                if(checkboxitem.checked) {
                    ExtractLayers.push(checkboxitem.value);
                }
            });

            // 根据要显示的图纸图层有哪些，重新渲染，渲染之后，对元素重新绘制颜色
            this.drawer.refreshSafeMonitorMetaByLayers(ExtractLayers).then(async () => {
                await this.drawer.refreshLayerCustomColor();
            })
        })

        this.$$('#layerselectCancel').on('click',() => {
            const checkboxList = document.getElementsByName('layer-select-checkbox');
            checkboxList.forEach((checkboxitem) => {
                checkboxitem.checked = this.originalSelectedLayers.some((item) => {
                    return checkboxitem.value === item;
                });
            })
        })

        this.$$('#layer-select-multi').on('click',(e) => {
            const checked = e.target.checked;
            const checkboxList = document.getElementsByName('layer-select-checkbox');
            if(checked) {
                checkboxList.forEach(item => item.checked = true);
            }
            else {
                checkboxList.forEach(item => item.checked = false);
            }
        });
    }

    template() {
        const div = `
            <div class="popup upload-popup sm-layerselect-pop" 
                style="height: 340px; width: 630px; left:50%; margin-left: -315px; margin-top: 20px; top:0">
                <header style="display: flex;justify-content: space-between;align-items: center">
                    <span>图层选择</span>
                    <label style="display: flex" class="item-checkbox item-checkbox-icon-start item-content">
                        <input type="checkbox" checked id="layer-select-multi" value=true />
                        <i class="icon icon-checkbox"></i>
                        <div class="item-inner">
                            <div class="item-title">全选</div>
                        </div>
                    </label>
                </header>
                <article style="height: 240px;overflow-y: auto">
                </article>
                <footer class="uploader-footer">
                    <p style="flex: 3"></p>
                    <div style="flex: 1;width: 90px">
                        <button style="flex: 1" class="button button-fill color-theme-blue popup-close" 
                            id="layerselect">
                            确定
                        </button>
                    </div>
                    <div style="flex: 1;width: 90px">
                        <button id="layerselectCancel" class="button button-fill color-gray popup-close">
                            取消
                        </button>
                    </div>
                </footer>
            </div>
        `;
        this.$$('#app').append(div);
    }

    async LayerCheckBoxTemplateCreate() {
        const layers = await this.db.operation(Type.Layer,'getAll');
        let checkBoxTemplate = '';
        // 第一次加载的时候 获取全部图层值作为，初始状态下的已选中图层列表
        this.originalSelectedLayers = layers.map(layer => layer.layer);
        layers.forEach((layer) => {
            checkBoxTemplate = checkBoxTemplate.concat(`
                <li>
                    <label class="item-checkbox item-checkbox-icon-start item-content">
                        <input type="checkbox" checked name="layer-select-checkbox" value="${layer.layer}" />
                        <i class="icon icon-checkbox"></i>
                        <div class="item-inner">
                            <div class="item-title">${layer.layer}</div>
                        </div>
                    </label>
                </li>
            `);
        });
        return checkBoxTemplate;
    }
}

